<template>
  <div class="page_box">
    <div>
      <el-button @click="excelIn">数据导入</el-button>
      <el-button @click="exportExcel">数据导出</el-button>
      <el-button @click="exportExcel2">数据导出(苗姐-爬虫数据导出)</el-button>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <UploadExcelVue :beforeUpload="beforeUpload" :onSuccess="handleSuccess" />
  </div>
</template>

<script>
import UploadExcelVue from "../components/UploadExcel.vue";
import {mockData} from '../mockData/6-29.js'

export default {
  components: {
    UploadExcelVue,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    // 导出
    exportExcel2() {
      import("../vender/Export2Excel").then((excel) => {
        const tHeader = ["序号", "公司名称"];

        // const filterVal = [
        //   "id",
        //   "title",
        //   "author",
        //   "pageviews",
        //   "display_time",
        // ];
        const filterVal = Object.keys({index:'1',name:'1',});
        const list = mockData.map((item,index)=> {
          return {
            index:index + 1,
            name:item
          }
        })
        console.log('list',list,filterVal);
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader, //表头 必填
          data, //具体数据 必填
          filename: "2023年6月29日-智联招聘-宜昌市-招聘公司", //非必填
          autoWidth: true, //非必填
          bookType: "xlsx", //非必填
        });
      });
    },
       // 导出
    exportExcel() {
      import("../vender/Export2Excel").then((excel) => {
        const tHeader = ["日期", "名称", "地址", "Readings", "Date"];
        // const filterVal = [
        //   "id",
        //   "title",
        //   "author",
        //   "pageviews",
        //   "display_time",
        // ];
        const filterVal = Object.keys(this.tableData[0]);
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader, //表头 必填
          data, //具体数据 必填
          filename: "excel-list", //非必填
          autoWidth: true, //非必填
          bookType: "xlsx", //非必填
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    // 导入
    excelIn() {},
    /**
     * 文件上传前的回调函数， 返回true 则继续上传，返回false 则中断
     */
    beforeUpload(file) {
      // 判断文件是否超过 1M
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "Please do not upload files larger than 1m in size.",
        type: "warning",
      });
      return false;
    },
    handleSuccess({ results, header }) {
      console.log("获取到 文件上传成功后到结果", {
        results,
        header,
      });
      //   this.tableData = results;
      //   this.tableHeader = header;
    },
  },
};
</script>

<style></style>
